<!--  -->
<template>
    <div>
      <mt-header title="商品详情" fixed>
      <router-link  to  slot="left">
        <mt-button icon="back" @click="$router.back(-1)" style="color:black"></mt-button>
      </router-link>
      <mt-button icon="more" slot="right"></mt-button>
      </mt-header>
      <div class="border">
        <img :src=img alt="">
        <p>{{ this.ProductInfo.ProductName }}</p>
        <p>免邮费 顺丰快递</p>
        <P>￥{{ this.ProductInfo.ProductPrice }}</P>
        <ul>
            <li>概述</li>
            <li>参数</li>
            <li>安装服务</li>
            <li>常见问题</li>
        </ul>
        <div v-if="this.ProductInfo.ProductIntroduce1==null">
            数据加载中....
        </div>
        <div>
            <img v-if="this.ProductInfo.ProductIntroduce1!==null" :src=img1  alt="">
            <img v-if="this.ProductInfo.ProductIntroduce2!==null" :src=img2  alt="">
            <img v-if="this.ProductInfo.ProductIntroduce3!==null" :src=img3  alt="">
            <img v-if="this.ProductInfo.ProductIntroduce4!==null" :src=img4  alt="">
            <img v-if="this.ProductInfo.ProductIntroduce5!==null" :src=img5  alt="">
            <img v-if="this.ProductInfo.ProductIntroduce6!==null" :src=img6  alt="">
            <img v-if="this.ProductInfo.ProductIntroduce7!==null" :src=img7  alt="">
        </div>
       
      </div>
      <div class="footer">
        <div @click="Kefu()">
            <img src="../assets/img/客服分析 耳麦 客服.png" alt=""> 
            <br/>
            客服
        </div>
        <div @click="GoCart()">
            <img src="../assets/img/购物车.png" alt="">
            <br/>
            购物车
        </div>
        <div @click="AddCart()">
            加入购物车
        </div>
        <div @click="NowBuy()">
            立即购买
        </div>
      </div>
    </div>
    </template>
    
    <script>
import { Toast } from 'mint-ui';
    export default {
    data() {    
    return {
        ProductInfo:{},
        img:null,
        img1:null,    
        img2:null,
        img3:null,
        img4:null,
        img5:null,
        img6:null,
        img7:null,
        userInfo:""
    }
    },
    //生命周期 - 创建完成（访问当前this实例）
    created() {
    
    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
        this.GetProductDetails(this.$route.query.pid)
        // 判断登录状态
        let userInfo=JSON.parse(localStorage.getItem("userInfo")); //去除localStoreage中的登录状态
          // console.log(this.userInfo)
          if(userInfo==null){
            // 路由跳转到首页
          }else{
              if(userInfo.isLogin){
                this.userInfo=userInfo
              }
          }
    },
    methods:{
        GetProductDetails(pid){
            var url= `/GetProductDetails?pid=${pid}`
            this.axios.get(url).then(res=>{
                this.ProductInfo=res.data.result[0]
                this.img=require("../assets/img/product/"+this.ProductInfo.ProductImg)
                if(this.ProductInfo.ProductIntroduce1!==null){
                    this.img1=require("../assets/img/product/"+this.ProductInfo.ProductIntroduce1)
                }
                if(this.ProductInfo.ProductIntroduce2!==null){
                    this.img2=require("../assets/img/product/"+this.ProductInfo.ProductIntroduce2)
                }
                if(this.ProductInfo.ProductIntroduce3!==null){
                    this.img3=require("../assets/img/product/"+this.ProductInfo.ProductIntroduce3)
                }
                if(this.ProductInfo.ProductIntroduce4!==null){
                    this.img4=require("../assets/img/product/"+this.ProductInfo.ProductIntroduce4)
                }
                if(this.ProductInfo.ProductIntroduce5!==null){
                    this.img5=require("../assets/img/product/"+this.ProductInfo.ProductIntroduce5)
                }
                if(this.ProductInfo.ProductIntroduce6!==null){
                    this.img6=require("../assets/img/product/"+this.ProductInfo.ProductIntroduce6)
                }
                if(this.ProductInfo.ProductIntroduce7!==null){
                    this.img7=require("../assets/img/product/"+this.ProductInfo.ProductIntroduce7)
                }
            })
        },
        err(a){
          this.toastInstanse=Toast(a);
      },
      Kefu(){
        this.err("客服实现不了",)
        console.log(this.ProductInfo )
      },
      GoCart(){
        this.$router.push("/ShoppingCart")
      },
      AddCart(){
        console.log(this.ProductInfo)
        var url= `/AddProductCart?pid=${this.ProductInfo.pid}&ProductImg=${this.ProductInfo.ProductImg}&ProductTitle=${this.ProductInfo.ProductName}&ProductPrice=${this.ProductInfo.ProductPrice}&UserId=${this.userInfo.uid}`
            this.axios.get(url).then(res=>{
              console.log(res)
              this.err(res.data.message)
      })

      },
      NowBuy(){
        var url= `/AddProductCart?pid=${this.ProductInfo.pid}&ProductImg=${this.ProductInfo.ProductImg}&ProductTitle=${this.ProductInfo.ProductName}&ProductPrice=${this.ProductInfo.ProductPrice}&UserId=${this.userInfo.uid}`
            this.axios.get(url).then(res=>{
              console.log(res)
              if(res.data.code==201){
                this.err(res.data.message)
              }else{
                this.$router.push("/ShoppingCart")
              }
      })
      }

    }
    }
    </script>
    <style scoped>
    /* @import url(); 引入css类 */
    .mint-header{
        color: black;
        background-color: white;
        font-size: 10px;
    }
    .border{
      margin: 10px;
      margin-top: 40px;
      margin-bottom: 35px;
    }
    .border img{
        width: 100%;
    }
    .border p{
        font-size: 15px;
    }
    .border p:nth-child(3){
        font-size:12px;
        padding: 5px 0;
        color: rgb(181, 181, 181);
    }
    .border p:nth-child(4){
        font-size:18px;
        color: red;
    }
    .border ul{
        display: flex;
        list-style: none;
        padding: 8px 0;
    }
    .border ul li{
        width: 25%;
        text-align: center;
        padding: 4px 0;
        border-right: 1px solid #2c3e50;
        font-size: 10px;
    }
    .border ul li:nth-child(4){
        border-right: 0px solid #2c3e50;
    }

  .footer{
    display: flex;
    height: 34px;
    /* margin-bottom: 5px; */
    position: fixed;
    bottom: 0;
    background-color: white;
  }
  .footer>div{
    text-align: center;
    font-size: 3px;
  }
  .footer :nth-child(1){
    background-color: white;
    width: 18%;
    /* color: #ee0a24; */
  }
  .footer :nth-child(1) img{
    /* margin-top: 3px; */
   width: 25%;
   /* height: 42%; */
  }
  .footer :nth-child(2){
    /* background-color: rgb(19, 19, 33); */
    background-color: white;
    width: 18%;
  }
  .footer :nth-child(2) img{
    /* margin-top: 3px; */
    width: 25%;
   /* height: 43%; */
  }
  .footer :nth-child(3){
    background-color: white;
    background: linear-gradient(90deg,#6bd8d8,#1baeae);
    width: 34%;
    color: white;
    /* margin-top: 5px; */
    line-height: 34px;
    border-radius: 40%;
    border-top-left-radius: 26.64rem;
    border-bottom-left-radius: 26.64rem;
  }
  .footer :nth-child(4){
    background: linear-gradient(90deg,#ff6034,#ee0a24);
    background-color: white;
    width: 34%;
    color: white;
    /* margin-top: 5px; */
    line-height: 34px;
    border-top-right-radius: 26.64rem;
    border-bottom-right-radius: 26.64rem;
    margin-right: 4px;
  }
    
    </style>        